<template>
	<view @click="companyClose" class="h_100">
		<view class="bg-white p-2">
			<view class="h4">说明</view>
			<text class="font_24_2">请使用认证企业企业邮箱收取验证码</text>
		</view>
		<view class="container bg-white mt-2">
			<u--form labelPosition="left" :model="childForm" ref="childForm" labelWidth="80" :rules="rules">
				<u-form-item label="认证企业" prop="company_name" borderBottom>
					<view class="name_box" @tap.stop.prevent>
						<u--input v-model="childForm.company_name" maxlength="20" border="none" placeholder="请选择" @change="inputChange" style="min-width: 400rpx;"></u--input>
						<!-- @focus="iptFocus" -->
						<view class="tips_box p-2 shadow" v-show="tipsShow">
							<image v-if="nameList.length <= 0" class="empty_img" src="@/static/img2/home/empty_img.png" mode="aspectFill"></image>
							<view v-else class="list">
								<scroll-view scroll-y="true" class="scroll-Y">
									<view
										class="list_item font_24_2 py-1"
										:class="{ c_main: item.company_name == childForm.company_name }"
										v-for="item of nameList"
										:key="item.id"
										@click="nameSelect(item, index)"
									>
										<rich-text :nodes="item.company_name"></rich-text>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="邮箱" prop="mail" borderBottom>
					<u-input v-model="childForm.mail" maxlength="30" border="none" placeholder="请输入邮箱">
						<template slot="suffix">
							<text class="c_9">{{ emailSuffix || '' }}</text>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="邮箱验证" prop="code" borderBottom>
					<u-input v-model="childForm.code" maxlength="30" border="none" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn_box px-2 py-2">
			<view class="h6 text-center py-2">
				若没有找到您要关联的企业，请前往
				<text class="ml-2" style="color: #0054FF;" @click="goPages('./index')">认证企业</text>
			</view>
			<button class="btn h6 text-white" @click="submit">马上关联</button>
		</view>
	</view>
</template>

<script>
import { enterpriseNamee, applyRelation, registerSendEmail } from '@/api/my/userinfo.js';
export default {
	data() {
		return {
			childForm: {
				company_name: '', //企业名
				company_id: '',
				mail: '', //邮箱
				code: '' //验证码
			},
			rules: {
				company_name: [
					{
						type: 'string',
						required: true,
						message: '请选择认证企业',
						trigger: ['blur']
					}
				],
				mail: [
					{
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					}
					// {
					// 	message: '请填写正确的邮箱',
					// 	pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
					// 	trigger: ['blur', 'change']
					// }
				],
				code: [
					{
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur']
					}
				]
			},
			// 关联公司搜索
			timer: null,
			tipsShow: false,
			nameList: [], //关联公司
			cName: '',
			tips: '',
			emailSuffix: '' //邮箱后缀
		};
	},
	onReady() {
		this.$refs.childForm.setRules(this.rules);
	},
	onLoad() {
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		inputChange(e) {
			if (this.timer !== null) clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				// if (e.length < 1) return;
				this.getCompany(e);
			}, 500);
		},
		// 获取企业列表
		getCompany(val) {
			this.tipsShow = true;
			enterpriseNamee({ kw: val || '', token: uni.getStorageSync('userInfo').token || '' })
				.then(res => {
					// console.log('企业', res);
					if (res.code == 0) {
						// 过滤出符合条件的值高亮
						res.data.map((item, index) => {
							if (item.company_name.includes(this.childForm.company_name)) {
								item.name = item.company_name;
								item.company_name = this.join(item.company_name, this.childForm.company_name);
							}
						});
						this.nameList = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取企业列表失败', err);
				});
		},
		// 关键字高亮
		join(str, key) {
			var reg = new RegExp(`(${key})`, 'gm');
			var replace = '<span style="color:#CF1526;font-weight:bold;">$1</span>';
			return str.replace(reg, replace);
		},
		nameSelect(item, index) {
			console.log('item==>', item);
			this.childForm.company_name = item.name;
			this.childForm.company_id = item.id;
			this.cName = item.name;
			this.emailSuffix = item.company_mail;
			// this.rules.applicant_name[0].required = false;
			setTimeout(() => {
				this.tipsShow = false;
			});
			this.$refs.childForm.clearValidate('company_name');
		},
		companyClose() {
			this.tipsShow = false;
			// 如果没有选择企业列表中的企业将把输入框置空
			// console.log(this.cName);
			if (!this.cName) {
				this.childForm.company_name = '';
				this.emailSuffix = '';
			}
		},
		// 获取验证码
		codeChange(text) {
			// console.log(text);
			this.tips = text;
		},
		getCode() {
			if (!(this.childForm.mail && this.emailSuffix)) {
				uni.$u.toast('请输入邮箱');
				return;
			}
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				registerSendEmail({ email: this.childForm.mail + this.emailSuffix }).then(res => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast(res.msg);
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode[0].start();
				});
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		// 认证
		submit() {
			this.$refs.childForm
				.validate()
				.then(res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						...this.childForm,
						mail: this.childForm.mail + this.emailSuffix
					};
					applyRelation(msg)
						.then(res => {
							console.log(res);
							if (res.code == 0) {
								uni.$u.toast('提交成功！请等待企业通过审核后我们将通过站内消息通知您');
								uni.navigateTo({
									url: '/pages/my/index'
								});
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('认证失败', err);
						});
				})
				.catch(errors => {
					uni.$u.toast('请正确填写企业的资料');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-upload__button {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview__image {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .u-upload__wrap {
	justify-content: flex-end;
}
.btn_box {
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #f2f2f2;
	z-index: 999;
	.btn {
		height: 90rpx;
		line-height: 90rpx;
		background: $color14;
		border-radius: 14rpx;
	}
}
.name_box {
	position: relative;
	.tips_box {
		width: 500rpx;
		max-height: 500rpx;
		position: absolute;
		top: 60rpx;
		right: -10rpx;
		background-color: $color2;
		z-index: 999;
		border-radius: 15rpx;
		border: 1px solid #f2f2f2;
		.empty_img {
			width: 100%;
			height: 300rpx;
			margin: auto;
		}
		.scroll-Y {
			height: 450rpx;
			.list_item {
				border-bottom: 1px solid #f2f2f2;
			}
			.list_item:last-child {
				border: 0;
			}
		}
	}
}
</style>
